<template>
  <div>
      <div class="top" >
        <!-- <el-input    style="width: 20%;margin: 10px 10px;" placeholder="请输入订单状态" prefix-icon="el-icon-search" v-model="name" maxlength="20"></el-input> -->
        <el-select v-model="value" placeholder="请选择订单状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
          <el-button type="primary" icon="el-icon-search" @click="searchName">搜索</el-button>
          <el-button style="float: right;" type="primary" @click="handleAdd">添加<i class="el-icon-upload el-icon--right"></i></el-button>
      </div>
      <el-table :data="recycleOrder" height="700" border stripe style="width: 100%">
        <el-table-column align="center" prop="id" label="id" width="120"></el-table-column>
        <el-table-column align="center" prop="ordername" label="用户名" width="120"></el-table-column>
        <el-table-column align="center" prop="phone" label="联系电话" width="120"></el-table-column>
        <el-table-column align="center" prop="status" label="订单状态" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == '0'" >待接单</el-tag>
            <el-tag v-if="scope.row.status == '1'" type='warning'>待上门</el-tag>
            <el-tag v-if="scope.row.status == '2'" type='success' >已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="订单信息" width="300">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>预约日期: {{ scope.row.dataSpan }}</p>
              <p>预约时间: {{ scope.row.timeSpan}}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.address }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit"  @click="handleUpdata(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete"  @click="handleDel(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="addVisible" :modal-append-to-body="false" width="60%" top="0" title="新增" :before-close="Close" >
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="ordername">
              <el-input  v-model="ruleForm.ordername" ></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input  v-model="ruleForm.phone" ></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input  v-model="ruleForm.address" ></el-input>
            </el-form-item>
            <el-form-item label="订单状态" prop="status">
              <el-radio-group v-model="ruleForm.status">
                <el-radio  label="0">待接单</el-radio>
                <el-radio label="1">待上门</el-radio>
                <el-radio label="2">已完成</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="预约日期" prop="dataSpan">
              <el-date-picker v-model="ruleForm.dataSpan" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="预约时间" prop="timeSpan">
              <el-radio-group v-model="ruleForm.timeSpan">
                <el-radio  label="8:00-10:00">8:00-10:00</el-radio>
                <el-radio label="10:00-12:00">10:00-12:00</el-radio>
                <el-radio label="14:00-16:00">14:00-16:00</el-radio>
                <el-radio label="16:00-18:00">16:00-18:00</el-radio>
              </el-radio-group>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addReset('ruleForm')">重置</el-button>
          <el-button type="primary" @click=" add('ruleForm')">提交</el-button>
        </span>
      </el-dialog>
      <el-dialog :visible.sync="updataVisible" :modal-append-to-body="false" width="60%" top="0" title="修改" :before-close="Close" >
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="ordername">
              <el-input :disabled="true" v-model="ruleForm.ordername" ></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input :disabled="true" v-model="ruleForm.phone" ></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input :disabled="true" v-model="ruleForm.address" ></el-input>
            </el-form-item>
            <el-form-item label="订单状态" prop="status">
              <el-radio-group v-model="ruleForm.status">
                <el-radio  label="0">待接单</el-radio>
                <el-radio label="1">待上门</el-radio>
                <el-radio label="2">已完成</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="预约日期" prop="dataSpan">
              <el-input :disabled="true" v-model="ruleForm.dataSpan" ></el-input>
              <!-- <el-date-picker v-model="ruleForm.dataSpan" type="date" placeholder="选择日期"></el-date-picker> -->
            </el-form-item>
            <el-form-item label="预约时间" prop="timeSpan">
              <el-input :disabled="true" v-model="ruleForm.timeSpan" ></el-input>
              <!-- <el-radio-group v-model="ruleForm.timeSpan">
                <el-radio  label="8:00-10:00">8:00-10:00</el-radio>
                <el-radio label="10:00-12:00">10:00-12:00</el-radio>
                <el-radio label="14:00-16:00">14:00-16:00</el-radio>
                <el-radio label="16:00-18:00">16:00-18:00</el-radio>
              </el-radio-group> -->
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updataReset('ruleForm')">重置</el-button>
          <el-button type="primary" @click=" updata('ruleForm')">提交</el-button>
        </span>
      </el-dialog>
  </div>

</template>

<script>
import myaxios from '../http/MyAxios'
import { BASE_URL } from '@/config'
  export default {
    data() {
            
      var Pass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPassword !== '') {
            this.$refs.ruleForm.validateField('checkPassword');
          }
          callback();
        }
      };
      var Pass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        options: [{
          value: '0',
          label: '待接单'
        }, {
          value: '1',
          label: '待上门'
        }, {
          value: '2',
          label: '已完成'
        },
        {
          value: '3',
          label: '全部'
        }],
        value: '',
        recycleOrder:[],
        id:0,
        name:'',
        addVisible: false,
        updataVisible:false,
        form:[],
        ruleForm: {
          status:'',
          ordername:'',
          phone: '',
          address: '',
          id:'',
        },
        rules:{
          status:[
          {required:true,message:'该字段必填',trigger:'blur'},
          ],
          address:[
          {required:true,message:'该字段必填',trigger:'blur'},
          ],
          dataSpan:[
          {required:true,message:'该字段必填',trigger:'blur'},
          ],
          timeSpan:[
          {required:true,message:'该字段必填',trigger:'blur'},
          ],
          ordername:[
          {required:true,message:'该字段必填',trigger:'blur'},
          ],
          phone:[
            {required:true,message:'该字段必填',trigger:'blur'},
            {
              pattern:/^1[3-9]\d{9}$/,
              message:'手机号格式不正确',
              trigger:'blur'
            }
          ],
        }
      }
    },
    beforeMount(){
      this.getRecycleOrder()
    },
    methods: {
      updataReset(formName) {
        this.$refs[formName].resetFields();
        this.ruleForm = {}
      },
      updata(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.form.id = this.id
            this.form.ordername =  this.ruleForm.ordername
           this.form.phone =  this.ruleForm.phone
           this.form.address =  this.ruleForm.address
           this.form.dataSpan =  this.ruleForm.dataSpan
           this.form.timeSpan=  this.ruleForm.timeSpan
           this.form.status = this.ruleForm.status
            let url=BASE_URL + '/v1/recycle/orderAllUpdate'
              myaxios.post(url,this.form).then(()=>{
                this.$message({
                  showClose: true,
                  message: '恭喜你，修改成功',
                  type: 'success'
                });

                this.getRecycleOrder()
                this.updataVisible = false
                }).catch(err=>{
                    console.warn(err);
                  })
          } else {
            alert('提交失败');
            return false;
          }
        });
      },
      handleUpdata(row){
        this.id = row.id
        let url=BASE_URL + '/v1/recycle/orderIdSearch'
        let params = {id:this.id}
        myaxios.get(url,params).then(res=>{
          this.ruleForm = res.data.data[0]
          this.updataVisible = true
        }).catch(err=>{
          console.warn(err);
        })
      },
      addReset(formName) {
        this.$refs[formName].resetFields();
      },
      add(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
           this.form.ordername =  this.ruleForm.ordername
           this.form.phone =  this.ruleForm.phone
           this.form.address =  this.ruleForm.address
           this.form.dataSpan =  this.ruleForm.dataSpan
           this.form.timeSpan=  this.ruleForm.timeSpan
           this.form.status = this.ruleForm.status
            let url=BASE_URL + '/v1/recycle/orderAdd'
              myaxios.post(url,this.form).then(()=>{
                this.$message({
                  showClose: true,
                  message: '恭喜你，提交成功',
                  type: 'success'
                });
                this.getRecycleOrder()
                this.addVisible = false
                }).catch(err=>{
                    console.warn(err);
                  })
          } else {
            alert('提交失败');
            return false;
          }
        });
      },
      handleAdd(){
        this.ruleForm = {}
        this.addVisible = true
      },
      handleDel(row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url=BASE_URL + '/v1/recycle/orderDelete'
          let params = {id:row.id}
            myaxios.get(url,params).then(()=>{
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.getRecycleOrder()
              }).catch(err=>{
                    console.warn(err);
                 })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      Close(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      searchName(){
        let url=BASE_URL + '/v1/recycle/FuzzySearch'
        myaxios.get(url,{status:this.value}).then(res=>{
          if (res.data.code == 200){
            this.recycleOrder = res.data.data
          }else{
            this.$message({
                  showClose: true,
                  message: '查询失败,该状态订单不存在',
                 type: 'warning'
                });
          }
        }).catch(()=>{
          this.$message({
                  showClose: true,
                  message: '查询失败',
                  type: 'error'
                });
        })

      },
      getRecycleOrder(){
        let url=BASE_URL + '/v1/recycle/orderSearch'
        myaxios.get(url).then(res=>{
          this.recycleOrder = res.data.data
          console.log(this.recycleOrder);
        }).catch(err=>{
          console.warn(err);
        })
    },
    },
  }
</script>
<style scoped lang="scss">

</style>